<template>
  <div>


    <div class="box">
      <div class="pic">
        <img src="../../img/cp.jpg" alt="" />
      </div>
      <div class="text">
        <div class="name">
          <span>产品设计从入门到精通（BAT名师授课）</span>
        </div>
        <div class="study">
          <span>6677人正在学</span>
        </div>
        <div class="cont">
          <span
              style="
                font-family: '思源黑体 CN Bold', '思源黑体 CN Regular',
                  '思源黑体 CN';
                font-weight: 700;
                color: #ffc71c;
              "
              >¥58&nbsp;
            </span>
            <span
              style="
                font-family: '思源黑体 CN';
                font-weight: 400;
                color: #cccccc;
                text-decoration:line-through;
              "
              >¥104</span>
            <i class="out"><span class="time">限时优惠</span></i>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
.box {
  display: flex;
  justify-content: space-between;
    padding-bottom: 20px;
}
.pic {
  width: 125px;
  heigth: 100px;
  
  img {
    width: 100%;
    height: 100%;
  }
}
.text {
  height: 20px;
  width: 200px;
  margin-right: 20px;
  margin-left: 20px;
  // margin-top: -15px;

  /* margin: 10px; */
  // display: flex;
  // flex-direction: column; 
  .name {
    font-family: "思源黑体 CN Bold", "思源黑体 CN Regular", "思源黑体 CN";
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    text-align: left;
  }
  .study{
    font-size: 12px;
    color: #999999;
    font-family: '思源黑体 CN';
    font-weight: 400;
    font-style: normal;
    text-align: left;
  }
  .cont{
    font-style: normal;
    font-size: 14px;
    text-align: left;
    .out{
      font-family: '微软雅黑';
      font-weight: 400;
      font-style: normal;
      font-size: 10px;
      color: #FF6262;
      line-height: 20px;
      border: 1px solid #FF6262;
      border-radius: 25px ;
      margin-left: 10px;
    }
  }
}
</style>